<template>
    <div id="detail-camera-equipment">
        <el-dialog
            :title="$t('nMjmzmOrf1Cl3D3TdnLx')"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
        <el-descriptions :column="2" size="large" border>
            <el-descriptions-item
                :label="$t('ztu0TpvwBrwVxA1Hahd4A')"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
            >{{ item.v_Name}}</el-descriptions-item>
            
            <el-descriptions-item :label="$t('anzVirgNbenjNuTUq8hSf')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.v_BrandName}}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('liRos24Dz6C9xVjHwNx')" label-align="right" align="center" label-class-name="my-label" class-name="my-content" :span="2">
                {{item.v_Region}}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('mm5tuTPzHlRx26l0H2Rt')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag size="small">{{item.v_OnlineName}}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item :label="$t('uEOs8sH3iErqSx2Rx0h')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag size="small">{{item.v_StatusName}}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item :label="$t('mvl7b0Y7yiblwyApPnpbA')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.v_RemoteDeviceId}}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('jjNgedp3cDKhRjKZg9E')" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag size="small">{{item.n_Sort}}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item :label="$t('cDlGh0fS7WejUuf1Cw5cC')" label-align="right" align="center" label-class-name="my-label" class-name="my-content" :span="2">
                {{item.v_MediaUrl}}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('cDlGh0fS7WejUuf1Cw5cD')" label-align="right" align="center" label-class-name="my-label" class-name="my-content" :span="2">
                {{item.v_RealMediaUrl}}
            </el-descriptions-item>
           
            <el-descriptions-item :label="$t('uDJY2uHey5cDkM2Yhp2w')" label-align="right" align="center" label-class-name="my-label" class-name="my-content" :span="2">
                {{item.v_Remark}}
            </el-descriptions-item>
                
        </el-descriptions>
            <template #footer>
                <el-button @click="handleClose">{{ $t('ml5D22SPhF8B3thSuLopc') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { CameraDetail } from '/@/api/its/camera'

export default defineComponent( {
    name: 'detail-camera-equipment',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object,
            default: null,
        }
    },
    setup(props,ctx){

        const item: any = ref({})
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        //获取详情
        const getDetail = async () => {
            try {
                let res = await CameraDetail({id: props.item.n_Id})
                if (res && res.data) {
                    item.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }
        }

        onMounted(async () => {
            await getDetail()
        })

        return {
            handleClose,
            item
        }
    },
} )
</script>
<style scoped lang="scss">
#detail-camera-equipment{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>